import { Observable } from 'rxjs';
import { EzFormGroupConfiguration } from '../ez-form-group';
import { EzForm } from './ez-form';

/**
 * 表单布局
 *
 * `vertical` 垂直布局
 * `horizontal` 水平布局
 * `inline` 内联布局
 */
export declare type EzFormLayout = 'vertical' | 'horizontal' | 'inline';

/**
 * 表单配置项
 */
export interface EzFormConfiguration {
  /**
   * 表单布局
   */
  layout?: EzFormLayout;

  /**
   * 表单控件组
   */
  groups: EzFormGroupConfiguration[];

  /**
   * 表单布局一行展示多少列
   */
  cols?: 1 | 2 | 3 | 4;

  /**
   * 全局表单控件 `Label` 长度比例（1 ~ 24）
   */
  itemLabelSpan?: number;

  /**
   * 控件组布局
   *
   * `default` 默认垂直布局
   * `tab` 标签页布局
   */
  groupStyle?: 'default' | 'tab';

  /**
   * 当控件组布局为 `tab` 布局时, 标签页头位置
   *
   * `top` 上面（默认）
   * `left` 左边
   */
  tabPosition?: 'top' | 'left';

  /**
   * 提交按钮文字
   */
  submitButtonText?: string;

  /**
   * 提交按钮和重置按钮是否独占一行
   */
  buttonsFull?: boolean;

  /**
   * 重置按钮文字
   */
  resetButtonText?: string;

  /**
   * 是否隐藏重置按钮
   */
  resetButtonHidden?: boolean;

  /**
   * 点击重置按钮触发事件回调函数
   */
  onReset?: (form: EzForm) => void;

  /**
   * 点击提交按钮并且在表单校验通过时的回调函数
   */
  onSubmit?: (form: EzForm) => Observable<any>;

  /**
   * 表单初始化完成时回调函数
   */
  onInit?: (form: EzForm) => void;
}
